<template>
  <div class="indicator-circle-1">
    <div class="circle-1-bg">
      <img class="bg-img-1" src="/imgs/business/visual-dark/statistic-bg-4-1.png" alt="">
      <img class="bg-img-2" src="/imgs/business/visual-dark/statistic-bg-4-2.png" alt="">
      <img class="bg-img-3" src="/imgs/business/visual-dark/statistic-bg-4-3.png" alt="">
    </div>

    <div class="circle-1-container">
      <div class="flex-1 circle-1-container-border">
        <slot name="left"></slot>
      </div>

      <div class="flex-1">
        <slot></slot>
      </div>

      <div class="flex-1 circle-1-container-border">
        <slot name="right"></slot>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
</script>

<style lang="scss" scoped>
.indicator-circle-1 {
  width: 100%;
  height: 240px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle-1-bg {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bg-img-1 {
  height: 115%;
  position: absolute;
  top: 3%;
}

.bg-img-2 {
  height: 80%;
  position: absolute;
}

.bg-img-3 {
  height: 65%;
  position: absolute;
  animation: rotate 2s infinite linear;
}

.circle-1-container {
  width: 100%;
  text-align: center;
  position: absolute;
  display: flex;
  justify-content: space-around;
  align-items: center;
} 

.circle-1-container-border {
  position: relative;

  &::before {
    content: '';
    width: 60%;
    max-width: 123px;
    height: 20px;
    background: url("/imgs/business/visual-dark/statistic-bg-4-4.png");
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
</style>
